<template>
	<view class="storePage">
		<n-loading></n-loading>
		<view v-if="storeInfoList">
			<view class="storeInfo">
				<view class="storeName">
					{{storeInfoList.name}}
				</view>
				<u-empty  text="暂无图片" v-if="!storeInfoList.images"></u-empty>
				<scroll-view scroll-x="true" class="imgBrowse" v-if="storeInfoList.images!=null">
					<view class="imgBox" v-for="(item,index) of storeInfoList.images" @tap="seeImg(index,storeInfoList.images)">
						<dh-image class="niccImg"
						:src="item" 
						errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png">
						</dh-image>
					</view>
				</scroll-view>
				<view class="storeAddr">
					<view class="address">
						<view>{{storeInfoList.address}}</view>
						<view class="distance">距你{{parseFloat(storeInfoList.distance).toFixed(2)}}km</view>
					</view>
					<view class="contact" @tap="tomap()">
						<u-icon name="map-fill" color="#666666" size="32"></u-icon>
						<!-- <view>导航</view> -->
					</view>
					<view class="contact" @tap="phoneCall()">
						<u-icon name="phone-fill" color="#666666" size="32"></u-icon>
						<!-- <view>联系商家</view> -->
					</view>
				</view>
				<view class="time">
					<view>
						<text v-if="timeRange(storeInfoList.open_time == undefined ? '' : storeInfoList.open_time.start_at,storeInfoList.open_time == undefined ? '' : storeInfoList.open_time.end_at,dateType(2)) == true">营业中</text>
						<text v-else>暂停营业</text>
						<text>{{storeInfoList.open_time == undefined ? '' : storeInfoList.open_time.start_at}}-{{storeInfoList.open_time == undefined ? '' : storeInfoList.open_time.end_at}}</text>
					</view>
				</view>
			</view>
			
			
			<!-- 活动和优惠券 -->
			<view class="tabsBox">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#FF5238" :bold="false"
				 inactive-color="#666666" bg-color=""></u-tabs>
			</view>
			<view class="discount">
				<view class="activityList" v-if="current == 0">
					<view class="activityListBox" v-if="storeInfoList.other_list!=undefined">
						<u-empty :style="{width:'100%'}" text="暂无商品" v-if="storeInfoList.other_list.length == 0"></u-empty>
						<view class="goodsItme" v-for="(item,index) of storeInfoList.other_list" :key="item.id"  @tap="goodsDetails(item.id)">
							<dh-image class="niccImg" :src="item.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
							<view class="goodsBox">
								<view class="goodsName ellipsis">{{item.name}}</view>
								<view class="goodsDescribe ellipsis">{{item.brief}}</view>
								<view class="goodsPrice">
									<view class="price">
										￥<text>{{item.price}}</text>
									</view>
									<view class="add">
										<u-icon name="plus" color="#FF5238" size="24"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			
				<view class="coupon" v-else-if="current == 1">
					<u-empty text="暂无优惠券" v-if="storeInfoList.coupon_list.length == 0"></u-empty>
					<view class="couponEach" v-for="(item,index) of storeInfoList.coupon_list" :key="item.id">
						<view class="couponEachCont" :class="{boxShadow:cIndex == index && ruleShow}">
							<view class="couponEachSide">
								<view class="sideLeft">
									<view class="circle1"></view>
									<view class="circle2"></view>
									<view class="sideLeftCont">
										<view class="amount"><text>¥</text>{{item.conditions.result}}</view>
										<view class="tips">{{item.conditions.condition_type_name}}</view>
									</view>
								</view>
								<view class="sideRight">
									<view class="circle1"></view>
									<view class="circle2"></view>
									<view class="sideRightCont">
										<view class="title ellipsis"><text>{{item.name}}</text></view>
										<view class="use">{{getdate(item.end_at,1)}}前使用</view>
										<view class="useRule" @tap="seeRule(index)">使用规则<u-icon name="arrow-down" color="#999999" size="12"></u-icon></view>
									</view>
								</view>
							</view>
						</view>
						<view class="couponBtn" :class="{couponBtnEd:item.already == 1}">{{item.already == 1?'已领取':'立即领取'}}</view>
						<view class="couponBtnEmpty" v-if="item.already == 1"></view>
						<view class="couponBtnEmpty" v-if="item.already == 0" @tap="receiveCoupon(item.id)"></view>
						<!-- 已领取图标 -->
						<image class="claimedIcon" v-if='item.already == 1' src="../../static/img/received.svg"></image>
						
						<view class="ruleContent" v-if="ruleShow && cIndex == index" :data-index="index">
							<view class="ruleInfo">{{item.conditions.result_type_name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '商品'
				}, {
					name: '优惠'
				}],
				storeInfoList:null,
				current: 0,
				ruleShow:false,
				cIndex:'',
				storeId:null,
				lat:0,//
				lon:0,//
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			this.isGetLocation();
			this.storeId = option.id;
			if(option.other){
				this.current=1;
			}
			// this.getStoreInfo(option.id);
		},
		methods: {
			// 获取定位
			getAuthorizeInfo(a="scope.userLocation"){  //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this=this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						_this.getLocationInfo();
					},
					fail(){    //1.2 拒绝授权
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			getLocationInfo(){  //2. 获取地理位置
				var _this=this;
				uni.getLocation({
					type: 'gcj02',
					success (res) {
						_this.lat = res.latitude;
						_this.lon = res.longitude;
						_this.getStoreInfo();
					}
				});
			},
			isGetLocation(a="scope.userLocation"){ // 3. 检查当前是否已经授权访问scope属性，参考下截图
				var _this=this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting[a]) {  //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						}else{
							_this.getLocationInfo()
						}
					}
				});
			},
			getStoreInfo() {
				this.apiget('/shop/store-front/view',{id:this.storeId,lat:this.lat,lon:this.lon}).then(res =>{
					if(res.data.status == 200 ) {
						this.storeInfoList = res.data.data;
					}
				})
			},
			// 预览图片
			seeImg(index, imageItems) {
				var imgUrls = [];
				imageItems.forEach((v, i) => {
					imgUrls.push(v);
				});
				// 预览图片
				uni.previewImage({
					current: index,
					urls: imgUrls
				});
			},
			change(index) {
				this.current = index;
			},
			tomap() {
				uni.openLocation({
					latitude: parseFloat(this.storeInfoList.lat),
					longitude: parseFloat(this.storeInfoList.lon),
					name:this.storeInfoList.name,
					address:this.storeInfoList.address,
					success: function () {
						console.log('success');
					}
				});
			},
			phoneCall() {
				uni.makePhoneCall({
				    phoneNumber: this.storeInfoList.phone 
				});
			},
			// 更多规则
			seeRule(index){
				this.ruleShow = !this.ruleShow;
				this.cIndex = index;
			},
			goodsDetails(id){
				uni.navigateTo({
					url:"../index/goodsInfo?id="+id
				})
			},
			// 领取优惠券
			receiveCoupon(id){//fun​/coupon​/receive
				var _this = this;
				this.apiget('/fun/coupon/receive',{promotion_id:id}).then(res =>{
					if(res.data.status == 200 ) {
						if(res.data.message == 'SUCCESS'){
							uni.showToast({
								icon: 'success',
								duration:1000,
								title: '领取成功',
								success: res => {
									setTimeout(function (){
										_this.getStoreInfo();
									}, 1000);
								},
							});
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.storePage {
		min-height: 100%;
		background-color: #F8F8FA;
		padding: 20rpx 32rpx;
	}
	.storeInfo {
		position: relative;
		padding: 24rpx 0 16rpx 24rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.02);
	
		.storeName {
			padding: 32rpx;
			color: #333333;
			font-size: 36rpx;
		}
		.time {
			padding: 0 32rpx 32rpx;
			font-size: 24rpx;
	
			text {
				margin-left: 20rpx;
			}
		}
	}
	
	
	
	
	.coupon {
		padding: 24rpx 32rpx;
	}

	.activityListBox {
		padding: 24rpx 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: row;

		.activityItem:last-child {
			border: none;
		}

		.activityItem {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			border-bottom: 1rpx solid #EEEFF3;

			.left {
				flex: auto;
				width: 1px;
			}

			.goodsName {
				font-size: 32rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			image {
				display: block;
				width: 232rpx;
				height: 232rpx;
				border-radius: 16rpx;
				margin-right: 20rpx;
			}

			.goodsPrice {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40rpx;
			}
		}
		
		.goodsItme {
			width: 49%;
			margin-bottom: 16rpx;
			background-color: #FFFFFF;
			box-shadow: 0px 2px 8px rgba(255, 82, 56, 0.02);
			border-radius: 8rpx;
		
			// image {
			// 	display: block;
			// 	width: 314rpx;
			// 	height: 334rpx;
			// 	border-radius: 8rpx 8rpx 0 0;
			// }
			
			.niccImg{
				display: block;
				width: 100%;
				height: 334rpx;
				border-radius: 8rpx 8rpx 0 0;
				overflow: hidden;
			}
			
			.goodsBox {
				padding: 0 16rpx;
				padding-bottom: 30rpx;
				line-height: 40rpx;
			
				.add {
					width: 46rpx;
					height: 46rpx;
					text-align: center;
					line-height: 46rpx;
					box-shadow: 0px 6rpx 6rpx rgba(255,82,56,.2);
					border-radius: 50%;
				}
			
				.goodsPrice {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20rpx;
			
					.price {
						color: #FF5238;
						font-size: 24rpx;
			
						text {
							font-size: 36rpx;
						}
					}
			
					label {
						margin-left: 8rpx;
						color: #999999;
						font-size: 22rpx;
						text-decoration: line-through;
					}
				}
			
				.goodsName {
					margin-top: 20rpx;
					font-size: 32rpx;
					font-weight: 900;
				}
			
				.goodsDescribe {
					font-size: 24rpx;
					color: #666666;
				}
			
			}
		}
	}

	.discount {
		border-radius: 16rpx;
		margin: 16rpx 0;
		.u-tabs{
			border-radius: 16rpx 16rpx 0 0;
		}
	}
	
	.tabsBox{
		padding: 0 200rpx;
	}


	.storeAddr {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 0 32rpx;
		margin: 34rpx 0;



		.address {
			width: 65%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			
			.distance{
				font-size: 24rpx;
				line-height: 40rpx;
				color: #666666;
			}
		}

		.contact {
			text-align: center;
			width: 56rpx;
			height: 56rpx;
			line-height: 56rpx;
			background: #F8F8FA;
			border-radius: 50%;
		}
	}

	.imgBrowse {
		padding-left: 32rpx;
		width: calc(100% - 32rpx);
		height: 212rpx;
		display: flex;
		align-items: center;
		white-space: nowrap;
		
		.imgBox{
			display: inline-block;
			width: 280rpx;
			height: 100%;
			margin-right: 8rpx;
			border-radius: 16rpx;
			overflow: hidden;
			
			.niccImg {
				display: inline-block;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
		}

	}

	.titleBg {
		position: absolute;
		width: 100%;
		height: 260rpx;
		top: 0;
		background: linear-gradient(180deg, #7B5D34 0%, rgba(123, 93, 52, 0) 100%);
	}

	// 新优惠券
	.couponEach{
		position: relative;
		margin-bottom: 16rpx;
		min-height: 224rpx;
		padding-top: 196rpx;
		
		.couponEachCont{
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
			height: 224rpx;
			width: 100%;
			padding-right: 94rpx;
			box-sizing: border-box;
			
			.couponEachSide{
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
				padding-right: 16rpx;
				background-color: #fff;
				border-radius: 16rpx;
				
				.sideLeftCont{
					text-align: center;
					height: 100%;
					padding: 18rpx;
					border-right: 2rpx dashed #ccc;
					color: #FF5238;
					
					.amount{
						font-size: 72rpx;
						line-height: 56rpx;
						
						text{
							font-size: 32rpx;
						}
					}
					
					.tips{
						font-size: 24rpx;
						line-height: 34rpx;
					}
				}
				
				.sideLeft{
					position: relative;
					padding: 48rpx 0;
					width: 160rpx;
					height: 100%;
					
					.circle1{
						position: absolute;
						top: -14rpx;
						right: -14rpx;
						width: 28rpx;
						height: 28rpx;
						background-color: #F8F8FA;
						border-radius: 50%;
					}
					.circle2{
						position: absolute;
						bottom: -14rpx;
						right: -14rpx;
						width: 28rpx;
						height: 28rpx;
						background-color: #F8F8FA;
						border-radius: 50%;
					}
				}
				
				.sideRight{
					flex: 1;
					width: 1px;
					position: relative;
					padding: 48rpx 0 48rpx 32rpx;
					height: 100%;
					
					.sideRightCont{
						
						.title{
							font-size: 28rpx;
							line-height: 40rpx;
							color: #666666;
							
							text{
								color: #333333;
								font-weight: 700;
								margin-right: 16rpx;
							}
						}
						
						.use{
							margin-top: 8rpx;
							font-size: 24rpx;
							line-height: 34rpx;
							color: #666666;
						}
						
						.useRule{
							margin-top: 20rpx;
							font-size: 24rpx;
							line-height: 34rpx;
							color: #999999;
							
							.u-icon{
								margin-left: 10rpx;
							}
						}
					}
					
					.circle1{
						position: absolute;
						top: -14rpx;
						left: -14rpx;
						width: 28rpx;
						height: 28rpx;
						background-color: #F8F8FA;
						border-radius: 50%;
					}
					.circle2{
						position: absolute;
						bottom: -14rpx;
						left: -14rpx;
						width: 28rpx;
						height: 28rpx;
						background-color: #F8F8FA;
						border-radius: 50%;
					}
				}
			}
		}
		
		.boxShadow{
			box-shadow: 0px 4rpx 60rpx -2rpx rgba(0, 0, 0, 0.05);
		}
		
		.couponBtn{
			position: absolute;
			right: 0;
			top: 0;
			z-index: 1;
			width: 110rpx;
			height: 224rpx;
			padding: 20rpx 32rpx 20rpx 48rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			line-height: 36rpx;
			color: #FFFFFF;
			background: linear-gradient(90deg, #FF5238 33.5%, rgba(255, 82, 56, 0.7) 100%);
			box-shadow: 0px 4rpx 8rpx rgba(0, 0, 0, 0.02);
			border-radius: 0px 16rpx 16rpx 0px;
		}
		.couponBtnEd{
			background: #FFE2DE;
			color: #FF5238;
		}
		
		.couponBtnEmpty{
			position: absolute;
			right: 0;
			top: 0;
			z-index: 3;
			width: 110rpx;
			height: 224rpx;
		}
		
		.claimedIcon{
			position: absolute;
			right: 110rpx;
			top: 112rpx;
			z-index: 3;
			width: 80rpx;
			height: 80rpx;
		}
		
		.ruleContent{
			padding: 50rpx 48rpx 22rpx;
			background: #FFFFFF;
			border-radius: 0px 0px 16rpx 16rpx;
			
			.ruleInfo{
				position: relative;
				padding-left: 15px;
				font-size: 12px;
				line-height: 24px;
				color: #333;
			}
			.ruleInfo:after{
				position: absolute;
				content: '';
				top: 50%;
				left: 14rpx;
				width: 4rpx;
				height: 4rpx;
				margin-top: -2rpx;
				background-color: #333;
			}
		}
	}
</style>
